<script setup>
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, onMounted, nextTick } from 'vue'

// 获取当前路由实例
const route = useRoute()
const router = useRouter()

// 响应式导航栏状态
const isScrolled = ref(false)
const mobileMenuOpen = ref(false)
const userDropdownOpen = ref(false)
const currentUser = ref(null)

// 监听滚动事件，改变导航栏样式
onMounted(() => {
  const handleScroll = () => {
    isScrolled.value = window.scrollY > 10
  }
  
  // 检查用户登录状态
  checkUserLogin()
  
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('click', handleOutsideClick)
  
  return () => {
    window.removeEventListener('scroll', handleScroll)
    window.removeEventListener('click', handleOutsideClick)
  }
})

// 检查用户登录状态
const checkUserLogin = () => {
  const userData = localStorage.getItem('user')
  if (userData) {
    try {
      currentUser.value = JSON.parse(userData)
    } catch (e) {
      console.error('Failed to parse user data:', e)
    }
  }
}

// 处理点击外部关闭下拉菜单
const handleOutsideClick = (event) => {
  if (!event.target.closest('.user-dropdown')) {
    userDropdownOpen.value = false
  }
}

// 切换用户下拉菜单
const toggleUserDropdown = () => {
  userDropdownOpen.value = !userDropdownOpen.value
}

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('user')
  localStorage.removeItem('token')
  currentUser.value = null
  userDropdownOpen.value = false
  nextTick(() => {
    router.push('/login')
  })
}
</script>

<template>
  <!-- 只在非登录页面显示导航栏 -->
  <header 
    class="app-header" 
    :class="{ 'scrolled': isScrolled }"
    v-if="route.path !== '/login' && route.path !== '/register'"
  >
    <div class="header-content">
      <!-- 品牌Logo -->
      <div class="nav-brand">
        <router-link to="/home" class="brand-link" @click="window.scrollTo({ top: 0, behavior: 'smooth' })">
          <img src="@/../img/5.webp" alt="金铲铲之战" class="brand-logo" />
          <span class="brand-name">金铲铲之战</span>
        </router-link>
      </div>
      
      <!-- 桌面导航链接 -->
      <nav class="nav-desktop">
        <ul class="nav-links">
          <li class="nav-item">
            <router-link to="/home" class="nav-link">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/about" class="nav-link">阵容攻略</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/simulator" class="nav-link">阵容模拟</router-link>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">强化符文</a>
          </li>
          <li class="nav-item">
            <router-link to="/jiban" class="nav-link">羁绊</router-link>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">装备</a>
          </li>
          <li class="nav-item">
            <router-link to="/profile" class="nav-link">个人中心</router-link>
          </li>
        </ul>
      </nav>
      
      <!-- 用户区域 -->
      <div class="nav-user">
        <div class="user-dropdown">
          <button class="user-menu-button" @click="toggleUserDropdown">
            <span class="user-avatar" :style="{ backgroundImage: currentUser ? `url(${currentUser.avatar || '/img/5.webp'})` : 'none' }"></span>
            <span class="user-indicator"></span>
          </button>
          <div class="user-dropdown-menu" :class="{ 'open': userDropdownOpen }">
            <div class="dropdown-user-info" v-if="currentUser">
              <span class="dropdown-username">{{ currentUser.username || '玩家' }}</span>
              <span class="dropdown-userid" v-if="currentUser.id">ID: {{ currentUser.id }}</span>
            </div>
            <a href="#" class="dropdown-item">我的战绩</a>
            <a href="#" class="dropdown-item">设置</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item logout" @click.prevent="handleLogout">退出登录</a>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button class="mobile-menu-button" @click="mobileMenuOpen = !mobileMenuOpen" aria-label="菜单">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="mobile-menu" :class="{ 'open': mobileMenuOpen }">
      <ul class="mobile-nav-links">
        <li class="mobile-nav-item">
          <router-link to="/home" class="mobile-nav-link" @click="mobileMenuOpen = false; window.scrollTo({ top: 0, behavior: 'smooth' })">首页</router-link>
        </li>
        <li class="mobile-nav-item">
          <router-link to="/about" class="mobile-nav-link" @click="mobileMenuOpen = false">阵容攻略</router-link>
        </li>
        <li class="mobile-nav-item">
          <router-link to="/simulator" class="mobile-nav-link" @click="mobileMenuOpen = false">阵容模拟</router-link>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link">强化符文</a>
        </li>
        <li class="mobile-nav-item">
          <router-link to="/jiban" class="mobile-nav-link" @click="mobileMenuOpen = false">羁绊</router-link>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link">装备</a>
        </li>
        <li class="mobile-nav-item">
          <router-link to="/profile" class="mobile-nav-link" @click="mobileMenuOpen = false">个人中心</router-link>
        </li>
        <li class="mobile-nav-item">
          <a href="#" class="mobile-nav-link" @click="handleLogout">退出登录</a>
        </li>
      </ul>
    </div>
  </header>
  
  <!-- 主内容区域 -->
  <main class="app-main">
    <RouterView />
  </main>
  
  <!-- 页脚 -->
  <footer class="app-footer" v-if="route.path !== '/login' && route.path !== '/register'">
    <div class="footer-content">
      <div class="footer-logo">
        <img src="@/assets/delta_logo.svg" alt="金铲铲之战" />
        <span class="footer-logo-text">金铲铲之战</span>
      </div>
      <div class="footer-links">
        <div class="footer-column">
          <h4>游戏</h4>
          <ul>
            <li><a href="#">小小英雄</a></li>
            <li><a href="#">游戏模式</a></li>
            <li><a href="#">装备合成</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>社区</h4>
          <ul>
            <li><a href="#">攻略技巧</a></li>
            <li><a href="#">玩家论坛</a></li>
            <li><a href="#">赛事直播</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>支持</h4>
          <ul>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">客服反馈</a></li>
            <li><a href="#">隐私政策</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-social">
        <a href="#" class="social-link"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a>
        <a href="#" class="social-link"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
        <a href="#" class="social-link"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
      </div>
      <div class="footer-copyright">
        <p>© 2024 金铲铲之战 版权所有</p>
      </div>
    </div>
  </footer>
</template>

<style>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* App容器样式 */
#app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #0a0a0a;
  color: #fff;
}

/* 头部导航样式 */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.app-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* 品牌Logo样式 */
.nav-brand {
  display: flex;
  align-items: center;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.brand-link:hover {
  color: #fff;
}

.brand-logo {
  height: 40px;
  margin-right: 12px;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700, #c0c0c0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 桌面导航链接样式 */
.nav-desktop .nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 15px;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.router-link-active {
  color: #00ffcc;
  background-color: rgba(0, 255, 204, 0.1);
}

/* 用户区域样式 */
.nav-user {
  position: relative;
}

.user-dropdown {
  position: relative;
}

.user-menu-button {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.user-menu-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #333;
  background-size: cover;
  background-position: center;
  border: 2px solid #00ffcc;
}

.user-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4CAF50;
  position: absolute;
  bottom: 8px;
  right: 8px;
  border: 2px solid #0a0a0a;
}

/* 用户下拉菜单 */
.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background-color: rgba(10, 10, 10, 0.95);
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.user-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-user-info {
  padding: 15px;
  border-bottom: 1px solid #333;
  text-align: center;
}

.dropdown-username {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 5px;
}

.dropdown-userid {
  display: block;
  font-size: 0.85rem;
  color: #888;
}

.dropdown-item {
  display: block;
  padding: 12px 15px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #00ffcc;
}

.dropdown-divider {
  height: 1px;
  background-color: #333;
  margin: 5px 0;
}

.dropdown-item.logout {
  color: #ff4d4f;
}

.dropdown-item.logout:hover {
  background-color: rgba(255, 77, 79, 0.1);
}

/* 主内容区域 */
.app-main {
  flex: 1;
  padding-top: 80px;
}

/* 移动端菜单按钮 */
.mobile-menu-button {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
}

/* 移动端菜单 */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  background-color: rgba(10, 10, 10, 0.95);
  z-index: 999;
  backdrop-filter: blur(10px);
}

.mobile-menu.open {
  display: block;
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid #333;
}

.mobile-nav-link {
  display: block;
  padding: 15px 24px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #00ffcc;
}

/* 页脚样式 */
.app-footer {
  background-color: rgba(10, 10, 10, 0.9);
  padding: 2rem 0;
  border-top: 1px solid #333;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .nav-desktop {
    display: none;
  }
  
  .mobile-menu-button {
    display: block;
  }
  
  .user-dropdown-menu {
    right: auto;
    left: 0;
    min-width: 100%;
  }
}
</style>
